<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数据大屏</title>
    <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/jquery.js"></script>
    <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.all.js"></script>
    <!-- <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/layui.js"></script> -->
    <link rel="stylesheet" type="text/css" href="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/css/layui.css" />
    <script type="text/javascript" src="https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/echarts.min.js"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=tQAk8cBCGKz24ekGp5Tk9Q8QUVlMA4VB"></script>
    <style>
        *{
            color: #0087FF;
            /* background-color: transparent; */
            font-size: 15px;
            font-family: Alibaba PuHuiTi;
        }
        body{
            font-family: "华文细黑";
            background:url("https://gudian-gddl.oss-cn-beijing.aliyuncs.com/backgroud.png") no-repeat;
            background-size: 100%;
        }
        .layui-col-space15>* {
            padding-top: 50px;
        }
        .layui-card{
            background-color: transparent;
        }
        .layui-table td, .layui-table th, .layui-table-col-set, .layui-table-fixed-r, .layui-table-grid-down, .layui-table-header, .layui-table-page, .layui-table-tips-main, .layui-table-tool, .layui-table-total, .layui-table-view, .layui-table[lay-skin=line], .layui-table[lay-skin=row] {
            border-width: 1px;
            /* border-style: solid; */
            border-style: none;
            border-color: #e6e6e6;
        }
        .layui-input, .layui-select, .layui-textarea {
            height: 38px;
            line-height: 1.3;
            line-height: 38px\9;
            border-width: 1px;
            /* border-style: solid; */
            border-style: none;
            background-color: #fff;
            border-radius: 2px;
        }
        .layui-input::placeholder .layui-unselect::placeholder{
            color: #0087FF;
        }
        .layui-table tbody tr:hover, .layui-table thead tr, .layui-table-click, .layui-table-header, .layui-table-hover, .layui-table-mend, .layui-table-patch, .layui-table-tool, .layui-table-total, .layui-table-total tr, .layui-table[lay-even] tr:nth-child(even) {
            /* background-color: #f2f2f2; */
            background-color: transparent;
        }
        .layui-table thead tr{
            /* background-color: #f2f2f2; */
            background-color: transparent;
        }
        /* select::placeholder{
            color: #0087FF;
        } */
        input {
            background-color: transparent;
        }
        select {
            background-color: transparent;
        }
        input::-webkit-input-placeholder {
            color: #0087FF;
        }
        .layui-form-select .layui-edge {
            color: #0087FF!important;
        }
        tr{
            background-color: transparent;
        }
        .layui-input,.layui-unselect{
            background-color: transparent;
        }
        .layui-table {
            background-color: transparent;
        }
        .box1{
            background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/1.png);
            background-repeat: no-repeat;
            background-size:100% 100%;
            height: 380px;
        }
        .box2{
            background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/2.png);
            background-repeat: no-repeat;
            background-size:100% 100%;
            height: 300px;
        }
        .box3{
            background-image: url(https://gudian-gddl.oss-cn-beijing.aliyuncs.com/layui/dpinfo/3.png);
            background-size:100% 100%;
            background-repeat: no-repeat;
            height: 380px;
        }
        .layui-btn {
            background-color: transparent;
            color: #0087FF!important;
            font-size: 15px;
        }
        .box1,.box3{
            padding: 80px 40px 0px 40px;
        }
        .box2{
            padding: 180px 40px 0px 40px;
        }
        .layui-body {
            position: absolute;
            /* left: 200px; */
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 998;
            width: auto;
            overflow-y: auto;
            box-sizing: border-box;
            padding: 0 20px;
        }
        .layui-form-select dl dd.layui-this {
            background-color: #00B4FF;
            color: #fff;
        }
        .layui-input, .layui-select, .layui-textarea {
            /* width: 143px; */
        }

        .clearfix:after,
        .clearfix:before {
            display: table;
            content: " "
        }

        .clearfix:after {
            clear: both
        }

        .pulll_left {
            float: left;
        }

        .pulll_right {
            float: right;
        }

        i {
            font-style: normal;
        }

        .text-w {
            color: #ffe400
        }

        .text-d {
            color: #ff6316
        }

        .text-s {
            color: #14e144
        }

        .text-b {
            color: #07e5ff
        }

        .head {
            position: relative;
            height: 90px;
            margin: 0 15px;
            padding-right: 60px;
        }

        .head h1 {
            font-size: 30px;
            letter-spacing: -2px;
            text-align: center;
            line-height: 90px;
            padding-right: 55px;
            color: #daf9ff;
        }

        .head .menu {}

        .head .menu ul {
            font-size: 0;
        }

        .head .menu li {
            display: inline-block;
            position: relative;
            margin: 25px 15px;
        ;
        }

        .head .menu li a {
            display: block;
            font-size: 18px;
            color: #fff;
            line-height: 40px;
            padding: 0 15px;
        }

        .head .time {
            position: absolute;
            right: 0;
            line-height: 90px;
        }

        .menu li:before,
        .menu li:after {
            position: absolute;
            width: 10px;
            height: 5px;
            opacity: .4;
            content: "";
            border-top: 2px solid #02a6b5;
            top: -1px;
            border-radius: 2px;
        }

        .menu li:before,
        .menu li a:before {
            border-left: 2px solid #02a6b5;
            left: -1px;
        }

        .menu li:after,
        .menu li a:after {
            border-right: 2px solid #02a6b5;
            right: -1px;
        }

        .menu li a {
            position: relative;
        }

        .menu li a:before,
        .menu li a:after {
            position: absolute;
            width: 10px;
            height: 5px;
            opacity: .4;
            content: "";
            border-bottom: 2px solid #02a6b5;
            bottom: -1px;
            border-radius: 2px;
        }

        .head .menu li a:hover {
            color: #f4e925;
        }

        .menu li a:hover:before,
        .menu li a:hover:after,
        .menu li:hover:before,
        .menu li:hover:after {
            border-color: #f4e925;
            opacity: 1;
        }
    </style>
</head>
<body>
<div class="layui-body">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <!-- <div class="layui-card">
                    <div class="layui-card-body">老干部数据大屏</div>
                </div> -->
                <div class="head clearfix">
                    <div class="menu menu2 pulll_left">
                        <ul>
                            <li><a href="#">主页</a></li>
                            <li><a href="https://qyyh.gdiu.cn/">现场连线</a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <!--left map start-->
            <div class="layui-col-md7">
                <div class="layui-row layui-col-space15">
                    <div class="layui-col-md24">
                        <div class="layui-card">
                            <!-- <div class="layui-card-header">地图</div> -->
                            <div>
                                <div id="container" class="layui-carousel" style="width: 100%; height: 730px;"> </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!--left map end-->

            <!--right table start-->
            <div class="layui-col-md5">

                <!-- right huodong info start-->
                <div class="layui-card">
                    <div class="layui-card-body box1">
                        <div class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <select id="areaSelect" name="areaSelect" lay-filter="areaSelectFilter">

                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <select id="jdSelect" name="jdSelect" lay-filter="jdSelectFilter">

                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <button id="btnSearch" class="layui-btn layui-btn-sm layui-btn-radius">检查搜索 </button>
                                </div>
                            </div>
                        </div>
                        <table id="huodongTable" class="layui-table" lay-filter="huodongTable"></table>
                    </div>
                </div>

                <!-- right huodong info end-->

                <div class="layui-card" style="padding-top: 20px;">
                    <div class="layui-card-body box2">
                        <div id="chart1" style="height: 200px;"></div>
                    </div>
                </div>


                <div class="layui-card">
                    <div class="layui-card-body box3">
                        <div class="layui-form toolbar">
                            <div class="layui-form-item">
                                <div class="layui-inline">
                                    <select id="areaSelect2" name="areaSelect2" lay-filter="areaSelectFilter2">

                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <select id="jdSelect2" name="jdSelect2" lay-filter="jdSelectFilter2">

                                    </select>
                                </div>
                                <div class="layui-inline">
                                    <button id="btnSearch2" class="layui-btn layui-btn-sm layui-btn-radius">检查搜索 </button>
                                </div>
                            </div>
                        </div>
                        <table id="huodongTable2" class="layui-table" lay-filter="huodongTable2"></table>
                    </div>
                </div>

            </div>
            <!--right table end-->

            <div>
                <div>
                </div>
                <!--基础函数开发-->
                <script>
                    //表格
                    layui.use(['table', 'form'], function() {
                        var $ = layui.$;
                        var hdtable = layui.table;
                        var hdtable2 = layui.table;
                        var form = layui.form;
                        var form2 = layui.form;
                        var HuoDong = { tableId: "huodongTable" };
                        var HuoDong2 = { tableId: "huodongTable2" };

                        // var server_host="http://localhost:8083";
                        var server_host="http://124.128.226.225:8083";
                        //渲染表格
                        var tableResult = hdtable.render({
                            elem: '#' + HuoDong.tableId,
                            url: server_host+'/blade-app/huodong/getHuodongPageByAreaInfo',
                            page: false,
                            height: 300,
                            cellMinWidth: 100,
                            cols: [
                                [{
                                    field: 'id',
                                    hide: true,
                                    title: '主键'
                                },
                                    {
                                        field: 'hdname',
                                        title: '活动名称',
                                        align: 'center'
                                    },
                                    {
                                        field: 'stime',
                                        title: '时间',
                                        align: 'center'
                                    },
                                    {
                                        field: 'areaname',
                                        title: '区域',
                                        align: 'center'
                                    },
                                    {
                                        field: 'manager',
                                        title: '发起人',
                                        align: 'center'
                                    },
                                ]
                            ]
                        });
                        //渲染表格
                        var tableResult2 = hdtable2.render({
                            elem: '#' + HuoDong2.tableId,
                            url: server_host+'/blade-app/teams/getTeamsPageAllBySearch',
                            page: false,
                            height: 300,
                            cellMinWidth: 100,
                            cols: [
                                [{
                                    field: 'id',
                                    hide: true,
                                    title: '主键'
                                },
                                    {
                                        field: 'teamname',
                                        title: '团队名称',
                                        align: 'center'
                                    },
                                    {
                                        field: 'areaname',
                                        title: '所属区域',
                                        align: 'center'
                                    },
                                    {
                                        field: 'fwlyname',
                                        title: '目标区域',
                                        align: 'center'
                                    },
                                    { field: 'teammanager',
                                        title: '负责人名称',
                                        align: 'center'
                                    },
                                ]
                            ]
                        });
                        HuoDong.search = function() {
                            var queryData = {};
                            queryData['areacode'] = $("#areaSelect").val();
                            queryData['jdcode'] = $("#jdSelect").val();
                            hdtable.reload(HuoDong.tableId, { where: queryData });
                        };
                        HuoDong2.search = function() {
                            var queryData = {};
                            queryData['areacode'] = $("#areaSelect2").val();
                            queryData['jdcode'] = $("#jdSelect2").val();
                            hdtable2.reload(HuoDong2.tableId, { where: queryData });
                        };


                        $(function() {
                            //地图
                            initmapInfo();
                            //初始化区
                            initAreaInfo();
                            HuoDong.search();
                            HuoDong2.search();
                            ///初始化统计图
                            inittongji();
                        })
///////////////////////////////////////////////////初始化地图相关数据
                        function initmapInfo() {
                            //init bd map container
                            var map = new BMap.Map("container", { enableMapClick:false});
                            var point = new BMap.Point(117.010213, 36.635747);
                            //init bd map level
                            map.centerAndZoom(point, 11);
                            //set map isnot scroll.
                            map.enableScrollWheelZoom(true);
                            map.setMapStyle({style:'light'});


                            $.ajax({
                                url: server_host+"/blade-app/huodong/getHuodongJwdByAreaInfo",
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    $.each(res, function(i, val) {
                                        var point = new BMap.Point(val.lng,val.lat);
                                        var marker = new BMap.Marker(point);
                                        marker.addEventListener("click", function(e) {
                                            var opts = {
                                                width: 230, // 信息窗口宽度
                                                height: 150 // 信息窗口高度
                                            }
                                            var sContent =
                                                "<div>"+
                                                "<h4>活动名称:"+val.hdname+"</h4>" +
                                                "<h4>地址:"+val.address+"</h4>"+
                                                "<h4>负责人:"+val.manager+"</h4>"+
                                                "<h4>电话:"+val.phone+"</h4>"+
                                                "</div>";
                                            var infoWindow = new BMap.InfoWindow(sContent, opts);
                                            map.openInfoWindow(infoWindow, point);
                                        });
                                        map.addOverlay(marker);
                                    });
                                },
                                error: function(res) {
                                  //  //$.messager.alert('错误', res.msg);
                                }
                            });

                            $.ajax({
                                url: server_host+"/blade-app/teams/getTeamsJwdByAreaInfo",
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    $.each(res, function(i, val) {
                                        var point = new BMap.Point(val.lng,val.lat);
                                        var marker = new BMap.Marker(point);
                                        marker.addEventListener("click", function(e) {
                                            var opts = {
                                                width: 230, // 信息窗口宽度
                                                height: 150 // 信息窗口高度
                                            }
                                            var sContent =
                                                "<div>"+
                                                "<h4>团队名称:"+val.teamname+"</h4>" +
                                                "<h4>所属区域:"+val.areaname+"</h4>"+
                                                "<h4>负责人:"+val.teammanager+"</h4>"+
                                                "<h4>电话:"+val.mangerphone+"</h4>"+
                                                "</div>";
                                            var infoWindow = new BMap.InfoWindow(sContent, opts);
                                            map.openInfoWindow(infoWindow, point);
                                        });
                                        map.addOverlay(marker);
                                    });
                                },
                                error: function(res) {
                                  //  //$.messager.alert('错误', res.msg);
                                }
                            });

                            var bdary = new BMap.Boundary();
                            bdary.get("济南市历下区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    //,strokeOpacity:0.3
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary2 = new BMap.Boundary();
                            bdary2.get("济南市市中区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });

                            var bdary3 = new BMap.Boundary();
                            bdary3.get("济南市槐荫区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary4 = new BMap.Boundary();
                            bdary4.get("济南市天桥区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary5 = new BMap.Boundary();
                            bdary5.get("济南市历城区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary6 = new BMap.Boundary();
                            bdary6.get("济南市长清区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary7 = new BMap.Boundary();
                            bdary7.get("济南市章丘区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary8 = new BMap.Boundary();
                            bdary8.get("济南市平阴县", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary9 = new BMap.Boundary();
                            bdary9.get("济南市济阳区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary10 = new BMap.Boundary();
                            bdary10.get("济南市商河县", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary11 = new BMap.Boundary();
                            bdary11.get("济南市莱芜区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });
                            var bdary12 = new BMap.Boundary();
                            bdary12.get("济南市钢城区", function(rs){
                                var count = rs.boundaries.length;
                                var pointArray = [];
                                for (var i = 0; i < count; i++) {
                                    var ply = new BMap.Polygon(rs.boundaries[i], {strokeWeight: 2, strokeColor: "#ff0000"}); //建立多边形覆盖物
                                    map.addOverlay(ply);
                                    pointArray = pointArray.concat(ply.getPath());
                                }
                            });

                        }

/////////////////////////////////////////////初始化现有的区///////////////////////////////
                        function initAreaInfo() {
                            $.ajax({
                                url: server_host+"/blade-system/region/getAreaByJn",
                                // data:{'id':id},
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    // alert(JSON.stringify(res));
                                    var result = res.data;
                                    var shtml = "<option value=''>请选择区域</option>";
                                    $.each(result, function(i, val) {
                                        shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                    });
                                    $("#areaSelect").html(shtml);
                                    $("#areaSelect2").html(shtml);
                                    form.render('select');
                                },
                                error: function(data) {
                                    //$.messager.alert('错误', data.msg);
                                }
                            });
                        }
////////////////////////////////////////////////////统计图相关函数///////////////////////
                        function inittongji(){
                            $.ajax({
                                url: server_host+"/blade-app/huodong/getHdAndUserBarByMonth",
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    option = {
                                        textStyle: {color: "rgba(255,255,255,.5)"},
                                        color: ['#1E90FF', '#40E0D0'],
                                        //title: { text: '某地区蒸发量和降水量'},
                                        tooltip: {
                                            trigger: 'axis'
                                        },
                                        legend: { textStyle: {color: "rgba(255,255,255,.5)"},data: ['活动次数', '参与人数'] },
                                        calculable: true,
                                        xAxis: [
                                            {
                                                type: 'category',
                                                data: ['历下区', '市中区', '槐荫区', '天桥区', '历城区', '长清区', '章丘区', '平阴县', '济阳区', '商河县', '莱芜区', '钢城区'],
                                            }
                                        ],
                                        yAxis: [
                                            {
                                                type: 'value',
                                                color: "rgba(255,255,255,.5)",
                                            }
                                        ],

                                        series:res
                                    };

                                    var myChart = echarts.init(document.getElementById('chart1'));
                                    myChart.setOption(option);
                                },
                                error: function(res) {
                                   // //$.messager.alert('错误', res.msg);
                                }
                            });
                        }

                        //根据客户经理select  为"所属客户营销单元select"赋值
                        form.on('select(areaSelectFilter)', function (data) {
                            // alert(data.value);
                            $.ajax({
                                url: server_host+"/blade-system/region/getStreetByArea?code="+data.value,
                                // data:{'id':id},
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    var result = res.data;
                                    var shtml = "<option value=''>请选择街道</option>";
                                    $.each(result, function(i, val) {
                                        shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                    });
                                    $("#jdSelect").html(shtml);
                                    form.render('select');
                                },
                                error: function(data) {
                                   // $.messager.alert('错误', data.msg);
                                }
                            });
                        });
                        form2.on('select(areaSelectFilter2)', function (data) {
                            // alert(data.value);
                            $.ajax({
                                url: server_host+"/blade-system/region/getStreetByArea?code="+data.value,
                                // data:{'id':id},
                                type: "get",
                                dataType: "json",
                                success: function(res) {
                                    var result = res.data;
                                    var shtml = "<option value=''>请选择街道</option>";
                                    $.each(result, function(i, val) {
                                        shtml += '<option value="' + val.code + '">' + val.name + '</option>';
                                    });
                                    $("#jdSelect2").html(shtml);
                                    form.render('select');
                                },
                                error: function(data) {
                                   // $.messager.alert('错误', data.msg);
                                }
                            });
                        });
                        // 搜索按钮点击事件
                        $('#btnSearch').click(function() {
                            HuoDong.search();
                        });
                        $('#btnSearch2').click(function() {
                            HuoDong2.search();
                        });

                    });
                </script>

            </div>
        </div>
    </div>
</div>
</body>
</html>
